<template>
  <a-modal v-model:visible="visible" title="查看消息已推送的用户" @ok="handleOk">
    <a-table :columns="columns" :data-source="data" rowKey="app_user_id" size="small">
      <template #name="{ text }">
        <p v-if="text">{{ text }}</p>
        <p v-else>/</p>
      </template>
      <template #isConfirm="{ text }">
        <p v-if="text === true">已确认</p>
        <p v-else style="color: red; font-weight: bold">未确认</p>
      </template>
    </a-table>
    <template #footer>
      <a-button key="choose" type="primary" @click="ChooseMpUsers">选择推送用户</a-button>
      <!-- <a-button key="submit" type="primary" @click="handleOk">确定</a-button> -->
    </template>
  </a-modal>
  <choose-users ref="openChild" @chosUser="chosUser" />
</template>
<script lang="ts">
import { defineComponent, ref, Ref, watch } from 'vue'
import { message } from 'ant-design-vue'
import ChooseUsers from '../../../components/chooseuser.vue'
import { get, post } from '../../../utils/request/request'

const columns = [
  {
    title: '小程序用户名',
    dataIndex: 'app_user_name',
    align: 'center',
    ellipsis: true,
    slots: { customRender: 'name' }
  },
  {
    title: '是否确认',
    dataIndex: 'is_confirm',
    align: 'center',
    slots: { customRender: 'isConfirm' }
  }
]

interface DataItem {
  app_user_id: number
  app_user_name: string
  is_confirm: boolean
}

const data: Ref<DataItem[]> = ref([])
const data1: Ref<DataItem[]> = ref([])

//modal
const useModalEffect = () => {
  const visible = ref<boolean>(false)
  const openChild = ref()
  const ChooseMpUsers = () => {
    openChild.value.showModal()
  }
  const showModal = () => {
    visible.value = true
  }
  const handleOk = () => {
    visible.value = false
  }
  return { visible, openChild, ChooseMpUsers, showModal, handleOk }
}

// 网络请求
const useHttpEffect = (id: any) => {
  const token: string = localStorage.getItem('token') as string
  const chosUser = async (idList: string[]) => {
    const res: any = await post(
      `/admin/api/v1/message/${id}/push`,
      {
        app_id_id: idList
      },
      token
    )
    console.log(res)
    if (res?.status_code === 0) {
      message.success('推送成功')
      getData(id)
    }
  }

  const getData = async (id: number) => {
    const res: any = await get(`/admin/api/v1/message/${id}`, token)
    console.log(res)
    if (res?.data?.push_to == null) {
      message.info('该消息未推送')
    } else {
      data.value = res?.data?.push_to
    }
  }

  return { chosUser, getData }
}

export default defineComponent({
  props: ['id'],
  components: {
    ChooseUsers
  },
  setup(props) {
    const token: string = localStorage.getItem('token') as string
    const id = ref<number>(0)
    const { visible, openChild, ChooseMpUsers, showModal, handleOk } = useModalEffect()
    const { chosUser } = useHttpEffect(id)
    watch(
      () => props.id,
      async (newVal) => {
        if (visible.value) {
          id.value = newVal
          const res: any = await get(`/admin/api/v1/message/${id.value}`, token)
          if (res.data.push_to == null) {
            data.value = data1.value
            message.info('该消息未推送')
          } else {
            data.value = res.data.push_to
          }
        }
      }
    )
    return {
      visible,
      showModal,
      openChild,
      ChooseMpUsers,
      handleOk,
      columns,
      data,
      chosUser
    }
  }
})
</script>
